<template>
  <div id="periodicalclass">
    <div class="header">
      <div class="head-top">
        <mt-header title="期刊">
          <router-link to="/home" slot="left">
            <mt-button icon="back"></mt-button>
          </router-link>
        </mt-header>
      </div>
    </div>

    <div class="main">
      <mt-navbar class="home-nav" v-model='active'>
        <div v-for="(item,index) in dataList" :key="index" @click="getPertwo(item.type_name)">
          <mt-tab-item class='nav-title' :id='item.type_name' v-text="item.type_name"></mt-tab-item>
        </div>
      </mt-navbar>

      <mt-tab-container v-model="active" swipeable>
        <mt-tab-container-item v-for="(item,index) in dataList" :id="item.type_name" :key='index'>
          <Literature :details="perdata"></Literature>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>

  </div>
</template>

<script>
import api from "./../../api/api.js";
import { Indicator } from "mint-ui";
import Literature from "./periodicalclass/Literature.vue";

export default {
  components: {
    Literature
  },
  data() {
    return {
      active: "",
      datevalue: "",
      dataList: [],
      perdata: [],
      initialize: []
    };
  },
  created() {
    this.userid = localStorage.getItem("userid");
    this.active = localStorage.getItem("type_name");
    this.datevalue = this.formatDate(new Date().getTime()); //时间
    this.prePushTime = this.datevalue.substring(0, 11); //取年月日
    this.getPerinit();
    this.getNavbar();
    this.firstRoute();
  },
  mounted() {},
  watch: {
    active(curVal, oldVal) {
      localStorage.type_name = curVal;
      this.getPertwo(curVal);
    }
  },
  methods: {
    firstRoute() {
      if (this.$route.query.type_name) {
        this.active = this.$route.query.type_name;
      }
    },
    //期刊获取一级列表
    getNavbar() {
      Indicator.open({
        text: "拼命加载中...",
        spinnerType: "triple-bounce"
      });
      this.$http({
        method: "post",
        url: api.baseURL + "getCnkiGroupInformation",
        params: {
          inParam: {
            group: ["type_name"],
            constraint: [],
            time: this.datevalue,
            userId: this.userid,
            pageSize: 66,
            currentPage: 1,
            resourceType: 5,
            maxvalue: [],
            sysCode: "FH_PUBOPE"
          }
        }
      })
        .then(response => {
          if (response.status == 200) {
            this.dataList = response.data.data;
            Indicator.close();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //初始化选择项
    getPerinit() {
      Indicator.open({
        text: "拼命加载中...",
        spinnerType: "triple-bounce"
      });
      this.$http({
        method: "post",
        url: api.baseURL + "getCnkiGroupInformation",
        params: {
          inParam: {
            group: ["source"],
            constraint: [
              {
                name: "type_name",
                value: this.active
              }
            ],
            time: this.datevalue,
            userId: this.userid,
            pageSize: 100,
            currentPage: 1,
            resourceType: 5,
            maxvalue: ["period", "unit", "file_name"],
            sysCode: "FH_PUBOPE"
          }
        }
      })
        .then(response => {
          if (response.status == 200) {
            this.perdata = response.data.data;
            Indicator.close();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //点击获取二级菜单
    getPertwo(name) {
      Indicator.open({
        text: "拼命加载中...",
        spinnerType: "triple-bounce"
      });
      this.$http({
        method: "post",
        url: api.baseURL + "getCnkiGroupInformation",
        params: {
          inParam: {
            group: ["source"],
            constraint: [
              {
                name: "type_name",
                value: name
              }
            ],
            time: this.datevalue,
            userId: this.userid,
            pageSize: 10,
            currentPage: 1,
            resourceType: 5,
            maxvalue: ["period", "unit", "file_name"],
            sysCode: "FH_PUBOPE"
          }
        }
      })
        .then(response => {
          if (response.status == 200) {
            this.perdata = response.data.data;
            Indicator.close();
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
#periodicalclass .header {
  box-sizing: border-box;
}

#periodicalclass .home-nav {
  max-width: 1900px;
  overflow-x: auto;
}

#periodicalclass .nav-title {
  white-space: nowrap;
  margin-left: 15px;
}

#periodicalclass .lastnav {
  padding-right: 15px;
}
/*navbar-swper滑动颜色*/

.mint-navbar .mint-tab-item.is-selected {
  border-bottom: 1px solid #e60012;
  color: #e60012;
}

.home-nav {
  margin-bottom: 20px;
  border-bottom: 1px solid #fafafa;
}

.mint-navbar .mint-tab-item.is-selected {
  margin-bottom: 1px;
}
</style>